.c-body
  //- 加载中
  .loadding(:class="loaddingClass")
    .load-txt 加载数据中...
    .load-ico

  //- 加载失败
  .loaded-fail(:class="loadedFailClass") {{loadedFail}}

  //- 加载成功
  div(:class="loadedSuccClass")

    //- 网页内容
    .c-content.c-prod-ist

      //- 导航条
      .bread-nav
        .crumbs
          router-link(to='/') 首页 >
          span &nbsp;&nbsp;产品

      //- 产品列表表格
      .options-content.product-table(v-show="!isHasData")
        .gf-table
          .fix-top(id='prod_list_tab')
            .item 名称|代码
              span.c-tit-fgx |
            .item 投资期限
              span.c-tit-fgx |
            .item 投资起点
              span.c-tit-fgx |
            .item 购买日期
              span.c-tit-fgx |
            .item 到期日
              span.c-tit-fgx |
            .item 风险等级
              span.c-tit-fgx |
            .item 操作
          table
            tbody
              tr(v-for='prod in products' @click.stop.prevent="goDetail(prod._id)")
                td(data-title="产品|代码" @click.stop.prevent="goDetail(prod._id)")
                  span.disblock {{prod.prod_name}}
                  span.disblock {{prod.prod_code}}
                td(data-title="投资期限")
                  span(v-if="!prod.tzqx") -
                  span(v-else) {{prod.tzqx}}{{prod.tzqx_unit}}
                td(data-title="投资起点")
                  span {{prod.tzqd}}{{prod.tzqd_unit}}
                td(data-title="购买日期")
                  span(v-if="!prod.sub_begin_date") -
                  span(v-else) {{prod.sub_begin_date}}
                td(data-title="到期日")
                  span(v-if="!prod.came_date") -
                  span(v-else) {{prod.came_date}}
                td(data-title="风险等级")
                  span.riskL1(v-if="prod.risk_level=='1'") 低
                  span.riskL2(v-else-if="prod.risk_level=='2'") 较低
                  span.riskL3(v-else-if="prod.risk_level=='3'") 中
                  span.riskL4(v-else-if="prod.risk_level=='4'") 较高
                  span.riskL5(v-else="prod.risk_level=='5'") 高
                td(data-title="操作")
                  a(href='javascript:void(0)' @click.stop.prevent="goDetail(prod._id)") 查看

        //- 手机端显示
        .c-small-prod
          .c-cplb(v-for='prod in products' @click.stop.prevent="goDetail(prod._id)")
            .c-prod-title
              span.c-prod-name {{prod.prod_name}}
              span.c-prod-code {{prod.prod_code}}

            .c-cow
              .pure-g
                .pure-u-1-3
                  .c-title 投资期限
                  .c-main
                    span(v-if="!prod.tzqx") -
                    span(v-else) {{prod.tzqx}}{{prod.tzqx_unit}}
                .pure-u-1-3
                  .c-title.c-center 投资起点
                  .c-main.c-center {{prod.tzqd}}{{prod.tzqd_unit}}
                .pure-u-1-3
                  .c-title.c-right 风险等级
                  .c-main.c-right.c-risk-right
                    span.riskL1(v-if="prod.risk_level=='1'") 低
                    span.riskL2(v-else-if="prod.risk_level=='2'") 较低
                    span.riskL3(v-else-if="prod.risk_level=='3'") 中
                    span.riskL4(v-else-if="prod.risk_level=='4'") 较高
                    span.riskL5(v-else="prod.risk_level=='5'") 高
            .c-cow-fgx

      //- 显示更多
      .c-view-more(v-show="!isHasData")
        a(href='javascript:void(0);' @click='gotoPage(page-1+2)')
          span {{viewMoreTxt}}

      //- 没有数据的时候显示
      .c-no-data(v-show="isHasData")
        p 暂无产品
